<template>
  <div class="user-edit">
    <van-form>
      <van-field name="uploader" label="上传头像">
        <template #input>
          <van-uploader v-model="fileList" :after-read="afterRead" max-count="1"/>
        </template>
      </van-field>
    <van-field
        v-model="user.name"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
        v-model="user.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
    />
    <van-field
          v-model="password2"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="新密码"
          :rules="[{ required: true, message: '确认密码' }]"
      />
    <van-field
          v-model="user.school"
          name="学校"
          label="学校"
          placeholder="学校"
          :rules="[{ required: false, message: '请填写学校' }]"
      />
    <div style="margin: 16px;">
      <van-button round block type="info" @click="updateUser()">确认修改</van-button>
    </div>
    </van-form>
  </div>
</template>
<script>
import {ApiService} from "@/axios/apiService";
import {Dialog,Form,Field} from "vant";
import Vue from 'vue'
Vue.use(Field)
Vue.use(Form)
export default {
  data(){
    return {
      img:"",
      password2:"",
      user:{},
      fileList:[],
    }
  },
  mounted() {
    this.getUserInfo();

  },
  methods: {
    // 获取用户详情
    getUserInfo() {
      const api = new ApiService("/user")
      api.getParams({
        userId:api.getCookie("userId")
      }).then(res=> {
        this.user = res.data.data;
        console.log(res.data.data)
        this.password2=res.data.data.password
        console.log("passwoed2"+this.password2)
      })
      console.log(this.user)
    },
    // 修改用户信息
    updateUser() {
      const api = new ApiService("/user/update")
      api.post(this.user).then(res=>{
        if(res.data.code == 200) {
          Dialog.alert({
            title:"系统提示",
            message:"修改信息成功"
          }).then(()=>{
            this.$router.push("/user")
          })
        }
        this.user = res.data.data;
      })
    },
    // 上传图片
    async afterRead(file) {
      console.log("this.afterRead()")
      //初试化
      let OSS = require('ali-oss');


      let client = new OSS({
        region: 'oss-cn-chengdu',
        accessKeyId: 'LTAI5tKbKKZo33r8EpDqgGWH',
        accessKeySecret: 'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
        bucket: 'jingzai-pethome',
      });
      //此时可以自行将文件上传至服务器
      try {
        // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
        console.log(new Date().getTime())
        var ti = new Date().getTime()
        let result = await client.put('/img/' + ti + '.jpg', file.file)
        console.log(result)
        console.log("图片链接：" + result.url)
        this.user.header =  result.url;
      } catch (e) {
        console.log(e);
      }
    },
  }
}
</script>
